<template>
  <my-form ref="form" @submit="handleSubmit"
    :model="model"
    v-if="optionsMap"
    inline
    label-width="90px"
    item-width="calc(50% - 20px)"
    :footer-block="false"
    size="small"
    footer-align="right"
    submit-text=""
    reset-text=""
    :rules="rules"
  >
    <my-input name="name" label="姓名"></my-input>
    <my-radio name="gender" label="性别" :options="optionsMap.gender"></my-radio>
    <my-cascader name="city"  label="城市" :options="optionsMap.city" root="100000" :props="{ props: {checkStrictly: true} }" ></my-cascader>
    <my-input-number name="age" label="年龄"></my-input-number>
    
    <my-form-custom label="时间范围" name="timeArea"  width="100%">
      <el-date-picker
        style="width: 95%"
        v-model="timeArea"
        @change="timeAreaChange"
        type="datetimerange"
        range-separator="至"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </my-form-custom>
  </my-form>
</template>
<script>
import {cloneDeep} from '$ui/utils/util'
import {findLevel} from '@/helper/dict-management/index'
export default {
  components: {},
  props: {
    options: {
      type: Object
    }
  },
  data() {
    return {
      optionsMap: null,
      model: {
        id: ''
      },
      timeArea: [],
      rules: {
        name: {required: true, message: '姓名是必填项'}
        // gender: {required: true, message: '性别是必填项'}
      }
    }
  },
  computed: {
  },
  methods: {
     
    getDictOpts() {
      if (this.options) {
        this.optionsMap = this.options
      } else {
        this.$getOptionsMap([
          {name: 'city', code: 'CITY'},  
          {
            name: 'gender', 
            code: 'genderCode', 
            custFetch: () => {
              const arr = [
                {dictCode: '0', dictName: '男'},
                {dictCode: '1', dictName: '女'}
              ]
              return Promise.resolve(arr)
            }
          }
        ]).then((res) => {
          this.optionsMap = res
        })
      }
      
    },
    handleSubmit(model) { 
      const output = this.standardModel(model)
      this.$emit('on-submit', output) 
    },
    timeAreaChange(val) { 
      const currentModel = cloneDeep(this.$refs.form.currentModel)
      currentModel.timeArea = val
      this.$refs.form.currentModel = currentModel
    },
    standardModel(model) {
      const data = cloneDeep(model) 
      data.startDate = data.timeArea && data.timeArea.length === 2 ? data.timeArea[0] : ''
      data.endDate = data.timeArea && data.timeArea.length === 2 ? data.timeArea[1] : ''
      data.city = data.city && data.city.length ? data.city[data.city.length - 1] : ''
      delete data.timeArea
      return data
    },
    setModel(data) {
      const _model = cloneDeep(data)
      const city = []
      if (!!_model.city) {
        findLevel(this.optionsMap.city, _model.city, city);
      }
      _model.city = city

      if (_model.startDate && _model.endDate) {
        _model.timeArea = [_model.startDate, _model.endDate]
      } else {
        _model.timeArea = []
      }
      this.timeArea = _model.timeArea
 
      this.model = _model
      console.log(_model)
      // console.log(city)
    }
  },
  created() {
    this.getDictOpts()
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>
</style>